<template>
    <div class="app-container">
        <el-form ref="newdataForm" :rules="rulesArr" :model="newArray" :inline="true" label-width="110px">
        <el-form-item label="RuleID" prop="Id" style="width:100%">
            <el-input style="width:500px" v-model="newArray.Id" />
        </el-form-item>
        <el-form-item label="规则名称" prop="Name">
            <el-input style="width:500px" v-model="newArray.Name" />
        </el-form-item>
        <div>
            <el-form-item label="模块编号" prop="ModuleId">
                <!-- <el-input style="width:500px" v-model="newArray.ModuleId" /> -->
                <div class="block">
                    <el-cascader
                        v-model='newArray.ModuleId'
                        placeholder="可搜索"
                        :options="options"
                        clearable
                        filterable></el-cascader>
                </div>
            </el-form-item>
            <el-form-item label="是否启用" label-width="200px" prop="Enabled">
                <el-radio-group v-model="newArray.Enabled">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="积分值">
                <el-input style="width:500px" v-model="newArray.Points" />
            </el-form-item>
            <el-form-item label="是否全局" label-width="200px" prop="IsGlobal">
                <el-radio-group v-model="newArray.IsGlobal">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="业务查询条件" prop="querycriteria">
                <el-input style="width:500px" v-model="newArray.querycriteria" />
            </el-form-item>
            <el-form-item label="是否设置每天积分上限" label-width="200px" prop="Issetupper" >
                <el-radio-group v-model="newArray.Issetupper">
                <el-radio :label="true">是</el-radio>
                <el-radio :label="false">否</el-radio>
                </el-radio-group>
            </el-form-item>
        </div>
        <div>
            <el-form-item label="开始积分时间" prop="BeginTime">
            <el-date-picker v-model="newArray.BeginTime" type="datetime" placeholder="请设置开始时间" value-format="yyyy-MM-dd HH:MM:SS" />
            </el-form-item>
            <el-form-item label="结束积分时间" prop="EndTime" label-width="480px">
            <el-date-picker v-model="newArray.EndTime" type="datetime" placeholder="请设置结束时间" value-format="yyyy-MM-dd HH:MM:SS" />
            </el-form-item>
        </div>
        <el-form-item label="描述" style="width:100%">
            <el-input v-model="newArray.marker" style="width:500px" :autosize="{ minRows: 2, maxRows: 4}" type="textarea" placeholder="描述" />
        </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer" style="padding:50px 0 0 60px">
            <el-button @click="goback()">
                取消
            </el-button>
            <el-button type="primary" @click="newtitle === '新增'?createData():updateData()">
                确定
            </el-button>
        </div>
    </div>
</template>
<script>
import {createArticle, updateArticle } from '@/api/points'

export default {
    neme:'dd',
    data(){
        var checkBeginTime = (rule, value, callback) => {
        console.log();
        if (new Date(value) > new Date(this.newArray.EndTime) && this.newArray.EndTime) {
            return callback(new Error("开始时间不能晚于结束时间"));
        }
        setTimeout(() => {
            callback();
        }, 1000);
        };
        var checkEndTime = (rule, value, callback) => {
        if (
            new Date(value) < new Date(this.newArray.BeginTime) &&
            this.newArray.BeginTime
        ) {
            return callback(new Error("结束时间不能早于开始时间"));
        }
        setTimeout(() => {
            callback();
        }, 1000);
        };
        return {
            //  表单对象
            newArray:{
                Id:'',
                Name:'',  // 规则名称 
                ModuleName:'',  // 模块名称
                ModuleId:'zhinan33',  // 模块编号
                Points:'',  // 积分值
                IsGlobal:false,  // 是否全局
                Issetupper:false,  // 是否设置每天积分上限
                BeginTime:'',  // 开始积分时间
                EndTime:'',  // 结束积分时间
                Enabled:true,  // 是否启用
                querycriteria:'', // 业务查询条件
                marker:'',          // 描述
            },
            // 表单验证规则
            rulesArr: {
                Name: [{ required: true, message: '请设置规则名称', trigger: 'blur' }],
                Id: [{ required: true, message: '请设置RuleID', trigger: 'blur' }],
                Enabled: [{ required: true, message: '请设置是否启用', trigger: 'blur' }],
                IsGlobal: [{ required: true, message: '请设置是否全局', trigger: 'blur' }],
                Issetupper: [{ required: true, message: '是否设置每天积分上限', trigger: 'blur' }],
                ModuleId: [{ required: true, message: '请设置模块编号', trigger: 'blur' }],
                querycriteria: [{ required: true, message: '请设置业务查询条件', trigger: 'blur' }],
                BeginTime: [
                { required: true, message: "请选择活动开始时间", trigger: "blur" },
                { validator: checkBeginTime, trigger: "blur" }
                ],
                EndTime: [
                { required: true, message: "请选择活动结束时间", trigger: "blur" },
                { validator: checkEndTime, trigger: "blur" }
                ],
                
            },
            options:[
                { value: 'zhinan',label: '指南33',},
                { value: 'zhinan1',label: '指南1',},
                { value: 'zhinan2',label: '指南2',},
                { value: 'zhinan3',label: '指南11',},
                { value: 'zhinan4',label: '指南22',},
                { value: 'zhinan5',label: '指南4',},
                { value: 'zhinan55',label: '指南44',},
                { value: 'zhinan22',label: '指南55',},
                { value: 'zhinan11',label: '指南5',},
                { value: 'zhinan223',label: '指南51',},
                { value: 'zhinan33',label: '指南131',},

            ],             // 模块名称参数
            newtitle:'新增',
        }
    },
    created() {
        console.log(this.$route.query.points)
        // this.getList()
    },
    methods:{
        // 新增
        createData() {
            this.$refs['newdataForm'].validate((valid) => {
                console.log(valid)
                console.log(this.newArray)
                if (valid) {
                    this.newArray.id = parseInt(Math.random() * 100) + 1024 // mock a id
                    this.newArray.author = 'vue-element-admin'
                    createArticle(this.newArray).then(() => {
                        // this.list.unshift(this.newArray)
                        this.$notify({
                            title: '成功',
                            message: '创建成功',
                            type: 'success',
                            duration: 2000
                        })
                        this.goback();

                    })
                }
            })

        },
        // 编辑
        updateData() {
            this.$refs['newdataForm'].validate((valid) => {
                if (valid) {
                const tempData = Object.assign({}, this.newArray)
                updateArticle(tempData).then(() => {
                    // const index = this.list.findIndex(v => v.id === this.newArray.id)
                    // this.list.splice(index, 1, this.newArray)
                    // this.newaddDialog = false
                    this.$notify({
                        title: '成功',
                        message: '更新成功',
                        type: 'success',
                        duration: 2000
                    })
                    this.goback();
                })
                }
            })
        },
        goback(){
            this.$router.go(-1)
        }

    }
}
</script>